<template>
  <div id="index">
    <div>
      <div v-if="loading">Loading...</div>
      <div v-else class="host-body">
     <!-- 第一行 -->
        <div class="d-flex jc-between px-2">
          <div class="d-flex" style="width: 45%;padding-left:32px;">
            <div
              class="react-right ml-4"
              style="width: 6.25rem; text-align: left;background-color: #0f1325;"
            >
              <span class="react-before"></span>
              <span class="text">数据分析1</span>
            </div>
            <div class="react-right ml-3" style="background-color: #0f1325;">
              <span class="text colorBlue">数据分析2</span>
            </div>
          </div>
          <div style="width: 60%;padding-right: 32px;" class="d-flex">
            <div class="react-left bg-color-blue mr-3">
              <span class="text fw-b">平台大数据展示</span>
            </div>
            <div
              class="react-left mr-4"
              style="width: 8rem; background-color: #0f1325; text-align: right;"
            >
              <span class="react-after"></span>
              <span class="text">{{dateYear}} {{dateWeek}} {{dateDay}}</span>
            </div>
          </div>
        </div>

    <div class="dashboard-editor-container">
      <el-row :gutter="32">
        <el-col :xs="24" :sm="24" :lg="8" :span="8" style="width: 30%;">
          <el-row>
            <div class="chart-wrapper">
              <bar-chart />
            </div>
          </el-row>
          <el-row>
            <div class="chart-wrapper">
              <pie-chart />
            </div>
          </el-row>
        </el-col>
        
        <el-col :xs="24" :sm="24" :lg="8" :span="24" style="width: 40%;">
          <div class="chart-wrapper">
            <china-map />
          </div>
        </el-col>
        
        <el-col :xs="24" :sm="24" :lg="8" :span="8" style="width: 30%;">
          <el-row>
            <div class="chart-wrapper">
              <bar-chart />
            </div>
          </el-row>
          <el-row>
            <div class="chart-wrapper">
              <pie-chart />
            </div>
          </el-row>
          
        </el-col>
        
      </el-row>
      <el-row>
        <el-col :span="5" style="width: 50%;">
            <panel-group @handleSetLineChartData="handleSetLineChartData" />
            <el-row style="background:#fff;">
              <line-chart :chart-data="lineChartData" />
            </el-row>
        </el-col>
        
        <el-col :xs="{span: 24}" :sm="{span: 24}" :md="{span: 24}" :lg="{span: 12}" :xl="{span: 12}" style="padding-right:8px;margin-bottom:30px;">
          <bottomRight />
        </el-col>
      </el-row>
    </div>
      </div>
    </div>
    </div>
</template>
  
<script>
  import PanelGroup from './components/PanelGroup.vue'
  import LineChart from './components/LineChart.vue'
  import PieChart from './components/PieChart.vue'
  import BarChart from './components/BarChart.vue'
  // import NoticeTable from './components/NoticeTable.vue'
  import ChinaMap from './components/ChinaMap.vue'
  // import taskRate from "./components/centerLeft1.vue";
  // import fujianMap from "./components/centerLeft2.vue";
  //import chinaMap from "./components/ChinaMap.vue"
  //import centerRight1 from "./components/centerRight1.vue";
  //import centerRight2 from "./components/centerRight2.vue";
  //import center from "./components/center.vue";
  // import bottomLeft from "./components/bottomLeft.vue";
  import bottomRight from "./components/bottomRight.vue";
  import { formatTime } from '@/utils'
  
  const lineChartData = {
    register: {
      expectedData: [100, 120, 161, 134, 105, 160, 165],
      actualData: [120, 82, 91, 154, 162, 140, 145]
    },
    task: {
      expectedData: [200, 192, 120, 144, 160, 130, 140],
      actualData: [180, 160, 151, 106, 145, 150, 130]
    },
    income: {
      expectedData: [80, 100, 121, 104, 105, 90, 100],
      actualData: [120, 90, 100, 138, 142, 130, 130]
    },
    exchange: {
      expectedData: [130, 140, 141, 142, 145, 150, 160],
      actualData: [120, 82, 91, 154, 162, 140, 130]
    }
  }
  
  export default {
    name: 'DashboardAdmin',
    components: {
      PieChart,
      ChinaMap,
      BarChart,
      PanelGroup,
      LineChart,
      // NoticeTable,
      //taskRate,
      // fujianMap
      //chinaMap,
      //centerRight1,
      //centerRight2,
      //center,
      // bottomLeft,
      bottomRight
    },
    data() {
      return {
        lineChartData: lineChartData.newVisitis,
        loading:true,
        dateDay:null,
        dateYear:null,
        dateWeek:null,
        weekday:["周日","周一","周二","周三","周四","周五","周六"],
      }
    },
    mounted(){
      this.timeFn();
      this.cancelLoading();
    },
    methods: {
      handleSetLineChartData(type) {
        this.lineChartData = lineChartData[type]
      },
      timeFn(){
        setInterval(()=>{
          this.dateDay=formatTime(new Date(),'HH:mm:ss');
          this.dateYear=formatTime(new Date(),'yyyy-MM-dd');
          this.dateWeek=this.weekday[new Date().getDay()];
        },1000)
      },
      cancelLoading(){
        setTimeout(()=>{
          this.loading=false;
        },500);
      }
    }
  }
</script>

<style lang="scss" scoped>
@import "../../../styles/dashboard";
#index {
    color: #d3d6dd;
    background-color: #000000;
    padding: 32px;
    position: relative;

  .dashboard-editor-container {
      padding: 0.2rem 0.2rem 0 0.2rem;
      background: url('~@/assets/pageBg.png') no-repeat center center;;
      background-size: cover;
      background-position: center center;
  
    .chart-wrapper {
      background: #fff;
      padding: 16px 16px 0;
      margin-bottom: 10px;
    }
  }
  
  @media (max-width:1024px) {
    .chart-wrapper {
      padding: 8px;
    }
  }}
</style> 